import {SpheresSingle, SpheresInstanced, SpheresInstancedColor} from './jsx/allLiveEditors';

# Spheres

`<Spheres />` renders a list of sphere shapes.

## Props

| Name       | Type       | Default | Description                       |
| ---------- | ---------- | ------- | --------------------------------- |
| `children` | `Sphere[]` | `[]`    | array of Sphere markers to render |

### Sphere

```js
type Sphere = {
  id?: number, // positive integer
  pose: {
    position: { x: number, y: number, z: number },
    orientation: { x: number, y: number, z: number, w: number }
  }
  scale: {
    x: number,
    y: number,
    z: number,
  },
  color: {
    r: number, // between 0 and 1
    g: number, // between 0 and 1
    b: number, // between 0 and 1
    a: number, // between 0 and 1
  },
  points: [{ x: number, y: number, z: number }],
}
```

## Single

<SpheresSingle />

## Instanced

<SpheresInstanced />

## Per-instance colors

<SpheresInstancedColor />
